<template>
  <div class="page-box">
    <template v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
      <div class="order-item" @click="toDetail(orderItem)">
        <div class="order-title">
          <span>
            <span>下单时间：</span>
            <span style="font-size: 12px">
              {{ orderItem.orderTime ? dayjs(orderItem.orderTime * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
            </span>
          </span>
          <span>{{ orderStatusEnum[orderItem.status] }}</span>
        </div>
        <div class="order-content">
          <span>
            <span>支付时间：</span>
            <span style="font-size: 12px">
              {{ orderItem.paymentTime ? dayjs(orderItem.paymentTime * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
            </span>
          </span>
          <span>￥{{ orderItem.totalAmount ? (orderItem.totalAmount / 100).toFixed(2) : "--" }}</span>
        </div>
        <div class="order-footer">
          <el-button simple @click.stop="toReview(orderItem)" size="small">评价</el-button>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import dayjs from "dayjs";
import { getOrderList } from "@/api/modules/mobile";
import { useMobileStore } from "@/stores/modules/mobile";
import { useRouter } from "vue-router";

const router = useRouter();

const orderStatusEnum = ["--", "待支付", "已支付", "已取消", "已退款"];

onMounted(async () => {
  await getOrderItemList();
});

const orderList = ref<any[]>([]);

const getOrderItemList = async () => {
  console.log("getlist");
  const params = {
    pageIndex: 1,
    pageSize: 99,
    userId: useMobileStore().userId
  };
  const res = await getOrderList(params);
  console.log(res);
  orderList.value = res.data.list;
};

const toReview = orderItem => {
  console.log("toreview");
  router.push(`/mobile/comment?orderId=${orderItem.orderId}`);
};

const toDetail = orderItem => {
  router.push(`/mobile/orderDetail?orderId=${orderItem.orderId}`);
  console.log("todetail");
};
</script>
<style lang="scss" scoped>
.page-box {
  position: relative;
  width: 100%;
  height: 99%;
  overflow-y: auto;
  background-color: #f3f0f0;
  .order-item {
    width: calc(100% - 56px);
    height: auto;
    padding: 12px;
    margin: 16px 16px 0;
    font-size: 13px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 5px 1px #33333350;
    .order-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 8px;
    }
    .order-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 12px 8px;
      padding-bottom: 8px;
      margin: 0 -12px;
      border-bottom: 1px solid #30303080;
    }
    .order-footer {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin-top: 12px;
    }
  }
}
</style>
